<template>
	<view class="terminal-state">
		<u-toast ref="uToast"></u-toast>
		<u-no-network></u-no-network>
		<u-navbar title="交易明细">
			<view class="u-m-r-20 " slot="right" @click="triggleDrop()">
				筛选
			</view>

		</u-navbar>
		<view class="flex terminal-state__header">
			<u-search placeholder="请输入商户号" v-model="requstBody.searchValue" shape="square" bg-color="#f6f6f6"
				:show-action="true" @search="search" @custom="search"></u-search>

		</view>
		<view class="flex u-padding-20 justify-between">
			<view class=" date flex align-center" @click="openPicker()">
				{{requstBody.beginTransTime}}至{{requstBody.endTransTime}}
				<u-image width="35rpx" height="35rpx" src="/static/image/order/icon_calendar.png"
					class="u-margin-left-10"></u-image>
			</view>
			<view class="date" :class="dateChecked==0?'date_select':''" @click="today()">
				今天
			</view>
			<view class="date " :class="dateChecked==1?'date_select':''" @click="yesterday()">
				昨天
			</view>
			<view class="date " :class="dateChecked==2?'date_select':''" @click="week()">
				近7天
			</view>
		</view>
		<view class="statistic__header ">
			<view class="statistic__header-title">总交易(元)</view>
			<view class="statistic__header-money ">{{orderCountInfo.totalTransAmount}}</view>
			<view class="flex justify-between ">
				<view class="statistic__item">

					<view class="">笔数</view>

					<view class=" u-margin-top-10">{{orderCountInfo.totalOrderCount}}</view>
				</view>
				<view class="statistic__item">

					<view class="">刷卡</view>

					<view class=" u-margin-top-10">{{orderCountInfo.posOrderCount}}</view>
				</view>
				<view class="statistic__item">

					<view class="">闪付</view>

					<view class=" u-margin-top-10">{{orderCountInfo.nfcOrderCount}}</view>
				</view>
				<view class="statistic__item">

					<view class=" ">扫码</view>

					<view class=" u-margin-top-10">{{orderCountInfo.scanOrderCount}}</view>
				</view>
			</view>

		</view>
		<scroll-view class="home__grid-group mt-20" scroll-y @scrolltolower="onScrolltolower">
			<view>
				<view class="terminal-state__item " v-for="(item,index) in orderList" :key="index"
					@click="goDetail(item.orderNo)">
					<view class="flex justify-between">
						<view class="">
							{{item.lsMerchantName}}
						</view>
						<view class="bold">
							{{item.transAmount}}
						</view>
					</view>
					<view class="flex justify-between u-m-t-10">
						<view class="">
							{{item.merchantNo}}
						</view>
						<view class="">
							{{item.transStatus=="SUCCESS"?"交易成功":item.transStatus=="INIT"?"初始化":item.transStatus=="FAILED"?"交易失败":item.transStatus=="REFUNDED"?"已退票":""}}
						</view>
					</view>
				</view>
				<u-loadmore :status="status" />
			</view>
		</scroll-view>
		<u-popup v-model="showPopup" mode="top" class="pop_filter">
			<view>
				<view class="pop_filter__title u-margin-left-20">
					支付方式
				</view>
				<view class="pop_filter__item flex u-margin-top-20 u-margin-bottom-20">
					<view class="pop_filter__btn " :class="{'pop_filter__select':checked===index}"
						v-for="(item,index) in payTypeCode" :key="index" @click="selectBtn(
					'1',index)">
						{{item.value}}
					</view>
				</view>
				<view class="pop_filter__title u-margin-left-20">
					结算类型
				</view>
				<view class="pop_filter__item flex u-margin-top-20 u-margin-bottom-20">
					<view class="pop_filter__btn" v-for="(item,index) in settleFilter" :key="index"
						:class="{'pop_filter__select':typeChecked===index}" @click="selectBtn('2',index)">
						{{item.value}}
					</view>
				</view>
				<view class="pop_filter__title u-margin-left-20">
					交易金额区间
				</view>
				<view class="pop_filter__item flex u-margin-top-20 u-margin-bottom-20">
					<u-input class="u-margin-left-20 u-margin-right-20" v-model="min" type="number" :border="false"
						:custom-style="{backgroundColor:'#f6f6f6',borderRadius:'20rpx'}" placeholder="最小值" />
					至
					<u-input class="u-margin-left-20 u-margin-right-20" v-model="max" type="number" :border="false"
						:custom-style="{backgroundColor:'#f6f6f6',borderRadius:'20rpx'}" placeholder="最大值" />
				</view>

				<view class="flex u-margin-20 u-padding-top-20">
					<u-button type="primary" class="flex-1 u-m-r-15" :custom-style="customCancelStyle"
						hover-class="false" @click="cancel()">重置</u-button>
					<u-button type="primary" class="flex-1 u-margin-left-15" :custom-style="customSubmitStyle"
						hover-class="false" @click="submitFilter()">确定</u-button>
				</view>
			</view>
		</u-popup>

		<term-picker :visable.sync="pickerVisable" :defaultDate="defaultDay" :maxDay="maxDay" @confirm="confirmByDay">
		</term-picker>

	</view>
</template>

<script>
	import termPicker from '@/components/term-picker/term-picker.vue';
	import getDateTime from '@/common/js/getdateTime.js';

	export default {
		components: {
			termPicker
		},
		data() {
			return {
				checked: null,
				dateChecked: null,
				typeChecked: null,
				customCancelStyle: {
					// 注意驼峰命名，并且值必须用引号包括，因为这是对象
					backgroundColor: '#f6f6f6',
					color: 'black'

				},
				customSubmitStyle: {
					// 注意驼峰命名，并且值必须用引号包括，因为这是对象
					backgroundColor: '#9D60FF',
					color: 'white'
				},
				src: "/static/image/home/icon_scan.png",
				thumb: "/static/image/home/icon_terminal_status.png",
				pageNo: 1,
				pageSize: "10",
				requstBody: {
					beginTransTime: "",
					endTransTime: "",
					agentNo: "",
					searchValue: "",

				},
				orderList: [],

				scrollTop: 0,
				status: "loadmore",
				showPopup: false,
				payTypeCode: [],

				settleFilter: [],
				date: "",
				orderCountInfo: {},
				searchInfo: {},
				min: "",
				max: "",
				pickerVisable: false, //是否日期选择控件
				defaultDay: [], //日期默认选择，为空则是当前日期
				maxDay: 365, //最大跨度日
				startDay: '',
				endDay: ''
			}
		},
		onReachBottom() {
			this.onScrolltolower();
		},
		onLoad(options) {
			const _that = this;
			_that.date = options.date;
			_that.requstBody.agentNo = options.agentNo;
			_that.requstBody.beginTransTime = _that.date;
			_that.requstBody.endTransTime = _that.date;

			this.transOrderQuery();
			this.transOrderSearchParam();
		},

		methods: {
			selectBtn(type, index) {
				if (type == "1") {
					this.checked = index;
				} else if (type == "2") {
					this.typeChecked = index;
				}

			},
			cancel() {
				const _that = this;
				if (_that.checked) {
					_that.checked == null;
					_that.$delete(_that.requstBody, "payTypeCode");
				}
				if (_that.typeChecked) {
					_that.typeChecked == null;
					_that.$delete(_that.requstBody, "settleType");
				}
				if (_that.min) {
					_that.min = "";
					_that.$delete(_that.requstBody, "minAmount");
				}
				if (_that.max) {
					_that.max = "";
					_that.$delete(_that.requstBody, "maxAmount");
				}

			},
			submitFilter() {
				const _that = this;
				if (_that.checked && _that.checked > 0) {

					_that.$set(_that.requstBody, "payTypeCode", _that.payTypeCode[_that.checked].key);
				} else if (_that.checked == 0) {

					_that.$delete(_that.requstBody, "payTypeCode");
				}

				if (_that.typeChecked && _that.typeChecked > 0) {
					_that.$set(_that.requstBody, "settleType", _that.settleFilter[_that.checked].key);
				} else if (_that.typeChecked == 0) {

					_that.$delete(_that.requstBody, "payTypeCode");
				}
				if (_that.min) {
					_that.$set(_that.requstBody, "minAmount", _that.min);
				}
				if (_that.max) {
					_that.$set(_that.requstBody, "maxAmount", _that.max);
				}
				_that.pageNo = 1;
				_that.orderList = [];
				_that.showPopup = false;
				_that.transOrderQuery();
			},
			triggleDrop() {
				this.showPopup = !this.showPopup;

			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			onScrolltolower() {
				this.status = "loading";
				this.terminalInfoList();
			},
			transOrderQuery() {

				let _that = this;


				_that.$zx.order_api.transOrderQuery(this.pageNo, this.pageSize, this.requstBody).then((data) => {


					_that.orderList = _that.orderList.concat(data.orderPageList);
					_that.orderCountInfo = data.orderCountInfo;
					if (data.length !== 0) {
						this.status = "loadmore";
						this.pageNo += 1;
					} else {
						this.status = "nomore";
					}
				});
			},

			transOrderSearchParam() {

				let _that = this;
				_that.payTypeCode.push({
					"key": "",
					"value": "全部"
				})
				_that.settleFilter.push({
					"key": "",
					"value": "全部"
				})
				_that.$zx.order_api.transOrderSearchParam().then((data) => {
					_that.searchInfo = data;
					_that.payTypeCode = _that.payTypeCode.concat(data.payTypeCode);
					_that.settleFilter = _that.settleFilter.concat(data.settleType);
				});
			},
			search(e) {
				console.log("e=" + e)
				this.requstBody.searchValue = e;
				this.pageNo = 1;
				this.orderList = [];
				this.transOrderQuery();
			},
			goStateDetail(item) {
				let itemStr = JSON.stringify(item)
				this.$u.route('packageB/pages/main/terminal/terminalStateDetail', {
					"item": encodeURIComponent(itemStr)
				})
			},
			openPicker() {
				this.pickerVisable = true;

			},
			confirmByDay(date) {
				this.dateChecked = -1;
				this.startDay = date[0];
				this.endDay = date[1];

				this.requstBody.beginTransTime = date[0];
				this.requstBody.endTransTime = date[1];
				this.pageNo = 1;
				this.orderList = [];
				this.transOrderQuery();
			},
			refreshData() {
				this.pageNo = 1;
				this.orderList = [];
				this.transOrderQuery();
			},
			today() {
				this.dateChecked = 0;
				this.requstBody.beginTransTime = getDateTime.dateTimeStr('y-m-d');
				this.requstBody.endTransTime = getDateTime.dateTimeStr('y-m-d');
				this.refreshData()
			},
			yesterday() {
				this.dateChecked = 1;
				this.requstBody.beginTransTime = getDateTime.getDateStr(null, -1);
				this.requstBody.endTransTime = getDateTime.getDateStr(null, -1);
				this.refreshData()
			},
			week() {
				this.dateChecked = 2;
				this.requstBody.beginTransTime = getDateTime.getDateStr(null, -7);
				this.requstBody.endTransTime = getDateTime.dateTimeStr('y-m-d');
				this.refreshData()
			},
			goDetail(orderNo) {
				this.$u.route('packageB/pages/main/trade/tradeDetail', {
					orderNo: orderNo
				})
			}

		},
	}
</script>

<style scoped lang="scss">
	.terminal-state {
		&__header {
			padding: 20rpx;
			background-color: white;
		}

		&__item {
			background-color: white;
			border-radius: 20rpx;
			margin: 10rpx 20rpx;
			padding: 20rpx;
		}
	}

	.yellow {
		color: #FF8E00;
	}

	.pop_filter {
		position: absolute;
		// top: 80rpx;

		&__title {
			font-weight: bold;
			height: 60rpx;
			line-height: 60rpx;
		}

		&__item {
			flex-wrap: wrap;
		}

		&__btn {
			background-color: #f6f6f6;

			padding: 10rpx 20rpx;
			text-align: center;
			margin: 10rpx 20rpx;
			border-radius: 10rpx;
		}

		&__input {
			background-color: #f6f6f6;
			margin: 0 20rpx;
			border-radius: 10rpx;

		}

		&__select {
			background-color: #F1E8FF;
			color: #9D60FF;
			background-image: url("/static/image/home/icon_filter_checked.png");
			background-position: right bottom;
			background-repeat: no-repeat;
		}
	}

	.date {
		background-color: white;
		border-radius: 50rpx;
		padding: 15rpx 20rpx;
	}

	.date_select {
		background-color: #9D60FF;
		color: white;
	}

	.statistic {
		&__header {
			background-image: url(/static/image/benefit/img_trade_query_page_bg.png);
			background-size: 100% 100%;
			color: white;
			text-align: center;
			height: 348rpx;
			padding: 50rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}


		&__header-money {
			margin-top: 10rpx;
			font-size: 22px;
			font-weight: bold;
			margin-bottom: 40rpx;
		}


	}
</style>